<template>
  <div class="sky">
    <div class="stars">
      <div class="star" :style="star" v-for="(star, index) in starts" v-bind:key="index"></div>
    </div>

    <div class="wave-box">
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
        <defs>
          <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
        </defs>
        <g>
          <use href="#wave"></use>
        </g>
        <g transform="translate(761 0)">
          <use href="#wave"></use>
        </g>
      </svg>
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
        <defs>
          <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
        </defs>
        <g>
          <use href="#wave"></use>
        </g>
        <g transform="translate(761 0)">
          <use href="#wave"></use>
        </g>
      </svg>
      <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">
        <defs>
          <path id="wave" d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z" fill="purple"></path>
        </defs>
        <g>
          <use href="#wave"></use>
        </g>
        <g transform="translate(761 0)">
          <use href="#wave"></use>
        </g>
      </svg>
    </div>

  </div>
</template>

<script>
export default {
  name: "sky",
  data(){
    return {
      starts:[]
    }
  },
  mounted() {
    // let starts = 1000;
    // let r = 800;
    // for(let i = 0; i < starts; i ++){
    //   let s = 0.2 + (Math.random());
    //   let curR = r + (Math.random() * 300);
    //   this.starts.push({
    //     transformOrigin: `0 0 ${curR}px`,
    //     transform: ` translate3d(0,0,-${curR}px) rotateY(${Math.random() * 360}deg) rotateX(${Math.random() * -50}deg) scale(${s},${s})`
    //   })
    // }
  }
}
</script>

<style scoped>
/*.sky {*/
/*  z-index: -1;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  right: 0;*/
/*  bottom: 3em;*/
/*  left: 0;*/
/*  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);*/
/*  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);*/
/*  background-attachment: fixed;*/
/*}*/

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
/* 星星动画时间 */

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  perspective-origin: 50% 100%;
  left: 50vw;
  animation: rotate 720s infinite linear;
}

.star {
  width: 2px;
  height: 2px;
  background: #F7F7B6;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
}



.wave-box{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 3em;
}

.wave {
  position: absolute;
  bottom: -5%;
  left: 0;
  right: 0;
}
.wave:nth-of-type(1) {
  --speed: 60;
  --opacity: 0.3;
  --height: 12;
  --width: 320;
  --lightness: 90;
  --rise: 2;
}
.wave:nth-of-type(2) {
  --speed: 30;
  --opacity: 0.6;
  --height: 10;
  --width: 200;
  --lightness: 95;
  --rise: 5;
}
.wave:nth-of-type(3) {
  --speed: 18;
  --opacity: 1;
  --height: 6;
  --width: 180;
  --lightness: 100;
  --rise: 0;
}
.wave {
  height: calc(var(--height, 0) * 1vh);
  width: calc(var(--width, 0) * 1vw);
  -webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
  animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
}
@media (max-width: 480px) {
  .wave {
    height: calc(var(--height, 0) * 0.75vh);
  }
}
.wave path {
  fill: hsl(0, 0%, calc(var(--lightness, 0) * 1%));
  -webkit-animation: wave calc(var(--speed, 0) * 1s) infinite linear;
  animation: wave calc(var(--speed, 0) * 1s) infinite linear;
}
@-webkit-keyframes wave {
  to {
    -webkit-transform: translate(-761px, 0);
    transform: translate(-761px, 0);
  }
}
@keyframes wave {
  to {
    -webkit-transform: translate(-761px, 0);
    transform: translate(-761px, 0);
  }
}
@-webkit-keyframes rise {
  50% {
    -webkit-transform: translate(0, calc(var(--rise) * -1%));
    transform: translate(0, calc(var(--rise) * -1%));
  }
}
@keyframes rise {
  50% {
    -webkit-transform: translate(0, calc(var(--rise) * -1%));
    transform: translate(0, calc(var(--rise) * -1%));
  }
}

</style>